<template>
    <view class="pt-30">
        <view class="center ft-24 t-w mb-24">自2024.01.01~2025.01.01累计学习100课时</view>
        <view class="charts-box w100">
            <qiun-data-charts
                type="pie"
                :opts="opts"
                :chartData="chartData"
                :canvas2d="true"
                canvasId="ooBIGwPZusYClgwWABDOuiwHbpBljtxk"
                :onmouse="false"
                :tooltipShow="true"
                :ontap="true"
                :tapLegend="true"
                :inScrollView="true"
            />
            <!-- :pageScrollTop="scrollTop" -->
        </view>
    </view>
</template>

<script setup>
/**
 * @description 饼状图统计 官方文档：https://www.ucharts.cn/v2/#/document/index
 * @author yinzhi
 * @date 2025-03-14
 */

import { onLoad } from '@dcloudio/uni-app'
import { ref, defineComponent } from 'vue'
defineComponent({
    name: 'PieChart'
})

const props = defineProps({
    // 如果出现图表不随页面滚动发生位置变化时，可以在qiun-data-charts上设置pageScrollTop
    scrollTop: {
        type: Number,
        default: 0
    }
})

// 饼状图数据
const chartData = ref({})

const getServerData = () => {
    //模拟从服务器获取数据时的延时
    setTimeout(() => {
        let res = {
            // 不设置labelText 就会默认显示百分比
            series: [
                {
                    data: [
                        {
                            name: '基础学习',
                            value: 50,
                            labelText: ' 50课时 ',
                            legendShape: 'rect'
                        },
                        {
                            name: '理论学习',
                            value: 30,
                            labelText: ' 30课时 ',
                            legendShape: 'rect'
                        },
                        {
                            name: '实操学习',
                            value: 20,
                            labelText: ' 20课时 ',
                            legendShape: 'rect'
                        }
                    ]
                }
            ]
        }
        chartData.value = JSON.parse(JSON.stringify(res))
    }, 500)
}

onLoad(() => {
    getServerData()
})

// 饼状图配置
const opts = ref({
    color: ['#5087ec', '#68bbc4', '#58a55c', '#f2bd42'],
    padding: [0, 0, 0, 0],
    enableScroll: false,
    fontSize: 14,
    fontColor: '#fff',
    legend: {
        show: true,
        position: 'bottom',
        float: 'center',
        padding: 0,
        margin: 0,
        fontSize: 13,
        lineHeight: 22,
        itemGap: 20,
        hiddenColor: '#ccc'
    },
    extra: {
        pie: {
            activeRadius: 0,
            border: false,
            offsetAngle: -90,
            labelWidth: 8
        },
        tooltip: {
            showArrow: false,
            bgOpacity: 0.5,
            fontSize: 12,
            boxPadding: 4,
            lineHeight: 22,
            legendShape: 'circle'
        }
    }
})
</script>

<style scoped lang="scss">
.charts-box {
    width: 100%;
    height: 270px;
    border-bottom: 2rpx solid #eee;
}
</style>
